<div class="scroll-x">
  <table>
    <thead>
      <slot name="head" />
    </thead>
    <tbody>
      <slot />
    </tbody>
  </table>
</div>

<style>
  table {
    border-collapse: collapse;
    min-inline-size: var(--container-size);

    :global(th, td) {
      padding-block: var(--space-xs);
      padding-inline: var(--space-2xs);
    }

    :global(td) {
      border-block-end: 1px solid var(--color-border);
      vertical-align: top;
    }

    :global(th) {
      text-align: start;
      font-weight: 500;
      border-block-end: 1px solid var(--color-heading);
    }

    :global(:is(td, th):first-child) {
      padding-inline-start: 0;
    }

    :global(:is(td, th):last-child) {
      padding-inline-end: 0;
    }
  }

  .scroll-x {
    overflow-x: auto;
  }
</style>
